<template>
  <div class="teacher">

    <div class="tea_user">
      <img
        :src="tea_user.avatar"
        alt=""
      >
      <div class="tea_user_item">
        <div>{{tea_user.name}}</div>
        <div class="tea_item_box">
          <div>
            <div>{{tea_user.title}}</div>
            <div>已有<span> {{tea_user.number}} </span>人学习</div>
          </div>
          <div>

            <div
              class="tea_user_true"
              v-if="tea_user.status == 0"
              @click="tea_follow_click(1)"
            >关注</div>
            <div
              class="tea_user_false"
              v-else
              @click="tea_follow_click(0)"
            >已关注</div>

          </div>
        </div>
        <div>
          <img
            :src="tea_user.imgone"
            alt=""
            @click="tea_user_click(tea_user.imgone_id)"
          >
          <img
            :src="tea_user.imgtwo"
            alt=""
            @click="tea_user_click(tea_user.imgtwo_id)"
          >
        </div>
      </div>
    </div>

    <div class="tea_user_list">
      <div>关注</div>
      <div class="tea_list_img">
        <div
          v-for="(item,index) in user_list"
          :key='index'
          :style="'left:'+ tea_list_img_left[index] +'%;'"
        >
          <img
            :src="item.cover"
            alt=""
          >
        </div>
      </div>
      <div>{{number}}人</div>
    </div>
    <div class="tea_resume">
      <div class="tea_re_title">个人履历</div>
      <div
        class="tea_res"
        v-if="res_status"
      >
        <div
          class="tea_res_box"
          v-for="(item,index) in all_res"
          :key='index'
        >
          <div>{{item}}</div>
        </div>
      </div>
      <div
        class="tea_res"
        v-else
      >
        <div
          class="tea_res_box"
          v-for="(item,index) in the_res"
          :key='index'
        >
          <div>{{item}}</div>
        </div>
        <div
          class="tea_res_mone"
          @click="tea_res_click"
        >更多</div>
      </div>
    </div>

    <div class="tea_curriculum" v-if="tea_curriculum.length > 0">
      <div class="tea_curriculum_title" >系列课</div>
      <div style="margin: 0 5%;">
        <Recommend
          :type='tea_curriculum'
        ></Recommend>
        <div
          @click="aletpush"
          class="osuser"
        >{{xiliekechakna}}&nbsp;<img style="width: 6px;margin-bottom:1px;" src="https://o6wndwjxn.qnssl.com/%E6%9F%A5%E7%9C%8B%E6%9B%B4%E5%A4%9A-%E7%AE%AD%E5%A4%B4@3x.png"></div>
      </div>
    </div>
    <div
      class="tea_curriculum"
      v-if="teacherdanke.length > 0"
    >
      <div class="tea_curriculum_title">单次课程</div>
      <div style="margin: 0 5%;">
        <Recommend
          :type='teacherdanke'
        ></Recommend>
        <div
          @click="aletpush1"
          class="osuser"
        >{{dankegengduo}}  <img style="width: 6px" src="https://o6wndwjxn.qnssl.com/%E6%9F%A5%E7%9C%8B%E6%9B%B4%E5%A4%9A-%E7%AE%AD%E5%A4%B4@3x.png"></div>
      </div>
    </div>
    <!-- <div v-for="(item,index) in teacherdanke" :key="index">
        123321
    </div> -->
    <div
      class="tea_tips"
      v-show="tea_tips_status"
      @click="tea_tips_click"
    >
      <Tips :type='tea_tips_text'></Tips>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Recommend from '@/components/curriculum/Recommend.vue'
import Tips from '@/components/public/Tips.vue'
import wxReady from '@/utils/wxReady'
import { lecturer, lecturer_ke, follow_lecturer } from '@/api/teacher'
export default {
  components: {
    Recommend,
    Tips
  },
  data () {
    return {
      dankegengduo: '查看更多',
      xiliekechakna: '查看更多',
      page: 1,
      page1: 1,
      teacherdanke: [],
      tea_tips_status: false,
      tea_tips_text: '暂时没有推荐',
      tea_user: {},
      all_res: [],
      the_res: [],
      res_status: false,
      number: 0,
      user_list: [],
      tea_list_img_left: ['10', '21', '32', '43', '54', '65'],
      tea_re_list: false,
      tea_re_html: '',
      tea_curriculum: [],
      lecturer_id: 0,
      kong_img: 'http://o6wndwjxn.qnssl.com/87365201901071336133855.png'
    }
  },
  watch: {
    tea_tips_status (state) {
      if (state === true) {
        setTimeout(() => {
          this.tea_tips_status = false
        }, 900)
      }
    }
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  created () {
    if (this.$route.query.lecturer_id) {
      this.lecturer_id = this.$route.query.lecturer_id
    } else if (this.$route.query.cid) {
      this.cid = JSON.parse(this.$route.query.cid)
      this.lecturer_id = this.cid.lecturer_id
    }
    this.tea_lecturer()
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
    })
  },
  methods: {
    aletpush1 () {
      this.page = this.page += 1
      this.tea_lecturer_ke(2, this.page)
    },
    aletpush () {
      this.page1 = this.page1 += 1
      this.tea_lecturer_ke(1, this.page1, 'xilie')
    },
    // 分享
    wxShare () {
      let title = this.tea_user.title
      let desc = 123
      wxReady(title, desc, 'teacher', this.tea_user.avatar, '&lecturer_id=' + this.lecturer_id).then(() => {
        this.marsk = false
      })
    },
    tea_follow_click (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        lecturer_id: this.lecturer_id
      }
      follow_lecturer(requery).then(res => {
        let { code, data } = res.data
        if (code == 200) {
          this.tea_user.status = e
          this.$forceUpdate()
          this.tea_lecturer(1)
        }
      })
    },
    tea_lecturer (e) {
      let requery = {
        app_id: this.app_id,
        lecturer_id: this.lecturer_id,
        user_id: this.user_id
      }
      lecturer(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let { code, data } = res.data
        // console.log('讲师详情', data)
        if (code == 200) {
          // tea_user
          this.tea_user.number = data.sum
          this.tea_user.name = data.name
          this.tea_user.avatar = data.img
          this.tea_user.title = data.label
          this.$nextTick(() => {
            this.wxShare()
          })
          if (data.recommend[0]) {
            this.tea_user.imgone = data.recommend[0].cover
            this.tea_user.imgone_id = data.recommend[0].curriculum_id
            if (data.recommend[1]) {
              this.tea_user.imgtwo = data.recommend[1].cover
              this.tea_user.imgtwo_id = data.recommend[1].curriculum_id
            } else {
              this.tea_user.imgtwo = this.kong_img
            }
          } else {
            this.tea_user.imgone = this.kong_img
            this.tea_user.imgtwo = this.kong_img
          }
          if (!e) {
            this.all_res = data.personal_resume
            if (data.personal_resume.length >= 3) {
              this.res_status = false
              for (var i = 0; i < 3; i++) {
                this.the_res.push(data.personal_resume[i])
              }
            } else {
              this.res_status = true
            }
          }

          this.tea_user.status = data.follow
          // number
          this.number = data.count
          // user_list
          this.user_list = data.f_img

          this.tea_lecturer_ke()
        }
      })
    },
    tea_res_click () {
      this.res_status = true
    },
    tea_lecturer_ke (idx, page, type) {
      let query = {
        app_id: this.app_id,
        lecturer_id: this.lecturer_id,
        page: page || 1,
        pageshow: 20
      }
      lecturer_ke(query).then(res => {
        let { code, data } = res.data
        // console.log('全部课程',data)
        if (code === 200) {
          let arr = []
          for (var i = 0; i < data.xilieke.length; i++) {
            if (data.xilieke[i].chapter_count !== 0) {
              data.xilieke[i].count = data.xilieke[i].chapter_count
              arr.push(data.xilieke[i])
            }
          }
          let arr1 = []
          for (var i = 0; i < data.danke.length; i++) {
            // if (data.danke[i].chapter_count !== 0) {
            data.danke[i].count = data.danke[i].chapter_count
            arr1.push(data.danke[i])
            // }
          }
          if (!idx) {
            this.tea_curriculum = arr
            this.teacherdanke = arr1
          }
          console.log(this.teacherdanke)
          if (idx === 1) {
            if (data.xilieke.length > 0 && type === 'xilie') {
              this.tea_curriculum = [...this.tea_curriculum, ...arr]
            } else {
              this.xiliekechakna = '暂无更多'
            }
          } else {
            if (type === 'xilie' || !page) {
              this.tea_curriculum = arr
              console.log(arr)
            }
          }
          if (idx === 2) {
            if (data.danke.length > 0 && type !== 'xilie') {
              this.teacherdanke = [...this.teacherdanke, ...arr1]
            } else {
              this.dankegengduo = '暂无更多'
            }
          } else {
            if (type !== 'xilie' || !page) {
              this.teacherdanke = arr1
            }
            // this.teacherdanke = [ ...this.teacherdanke, ...arr1 ]
          }
        }
      })
    },
    tea_re_mone () {
      this.tea_re_list = true
    },
    tea_user_click (e) {
      if (e) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: e
          }
        })
      } else {
        this.tea_tips_status = true
      }
    },
    tea_tips_click () {
      this.tea_tips_status = false
    }
  }
}
</script>

<style>
.osuser {
  width: 100%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #DA4131;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.tea_tips {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.tea_res {
  width: 90%;
  margin: 0 5%;
  font-size: 14px;
  color: #1a1a1a;
}
.tea_res_box {
  padding-left: 20px;
  margin: 12px 0;
}
.tea_res_box > div {
  position: relative;
}
.tea_res_box > div:after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  left: -14px;
  top: 7px;
  background: #DA4131;
  border-radius: 50%;
}
.tea_res_mone {
  width: 100%;
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-size: 15px;
  color: #f29911;
}
.tea_user {
  width: 100vw;
  height: calc(100vw * 1.4);
  position: relative;
}
.tea_user > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}
.tea_user_item {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vw;
  padding: 0 5%;
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1)
  );
  z-index: 2;
  color: white;
  overflow: hidden;
}

.tea_user_item > div:nth-child(1) {
  margin-top: 33vw;
  margin-bottom: 2vw;
  height: 10vw;
  line-height: 10vw;
  font-size: 24px;
  font-weight: bold;
}
.tea_item_box {
  display: flex;
  height: 16vw;
  /* background: red; */
}
.tea_item_box > div:nth-child(1) {
  flex: 3;
}
.tea_item_box > div:nth-child(1) div:nth-child(1) {
  font-size: 14px;
  height: 8vw;
  line-height: 10vw;
}
.tea_item_box > div:nth-child(1) div:nth-child(2) {
  font-size: 14px;
  height: 8vw;
  line-height: 6vw;
}
.tea_item_box > div:nth-child(1) div:nth-child(2) span {
  font-size: 18px;
  color: #DA4131 ;
}
.tea_item_box > div:nth-child(2) {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tea_user_true {
  width: 100%;
  background: #DA4131;
  color: white;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
}
.tea_user_false {
  width: 100%;
  height: 30px;
  border: 1px solid white;
  border-radius: 500px;
  text-align: center;
  line-height: 27px;
  font-size: 15px;
}
.tea_user_item > div:nth-child(3) {
  /* background: yellow; */
  display: flex;
  /* align-items: center;
	justify-content: center; */
}
.tea_user_item > div:nth-child(3) img {
  width: calc(100vw * 0.425);
  height: calc(100vw * 0.425 * 0.63);
  margin: 15px 0;
  border-radius: 4px;
  object-fit: cover;
}
.tea_user_item > div:nth-child(3) img:nth-child(1) {
  margin-right: 5vw;
}
.tea_user_list {
  height: 60px;
  /* border-bottom: 10px solid #f0f0f0; */
  color: #999999;
  position: relative;
}
.tea_user_list > div {
  position: absolute;
  top: 0;
  font-size: 14px;
  line-height: 50px;
}
.tea_user_list > div:nth-child(1) {
  width: 30%;
  left: 0;
  text-align: right;
}
.tea_user_list > div:nth-child(3) {
  width: 30%;
  left: 70%;
}
.tea_list_img {
  width: 40%;
  top: 5px !important;
  height: 40px;
  left: 30%;
}
.tea_list_img > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.tea_list_img > div img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid white;
  transform: translate(0, -50%);
}
.tea_resume {
  width: 100%;
  /* border-bottom: 10px solid #f0f0f0;  */
}
.tea_re_title,
.tea_curriculum_title {
  width: 90%;
  margin: 20px 5%;
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
.tea_re_after {
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 20px;
  width: 80%;
  margin-left: 15%;
  position: relative;
}
.tea_re_after:after {
  position: absolute;
  content: "";
  left: -15px;
  top: 6px;
  width: 6px;
  height: 6px;
  background: #f29911;
  border-radius: 50%;
}

.tea_re_list {
  position: relative;
}
.tea_re_mone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #f29911;
  font-size: 15px;
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 1)
  );
}

.tea_curriculum_item {
  width: 90%;
  margin: 0 5%;
}
.tea_curriculum_list {
  display: inline-block;
  width: 48%;
  margin: 5px 1%;
  height: 170px;
}
.tea_curriculum_list > img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 4px;
}
.tea_curriculum_list > div:nth-child(2) {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
}
.tea_curriculum_list > div:nth-child(3) {
  font-size: 12px;
  color: #999999;
  margin-top: 6px;
}
.tea_curriculum_list > div:nth-child(4) {
  font-size: 14px;
  color: #fd5e5e;
  margin-top: 5px;
}
.tea_curriculum_list > div:nth-child(4) span {
  font-size: 12px;
  color: #cccccc;
  position: relative;
}
.tea_curriculum_list > div:nth-child(4) span:after {
  content: "";
  position: absolute;
  left: -10%;
  top: 49%;
  height: 1px;
  width: 120%;
  background: #cccccc;
}
</style>
